<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>请款记录管理</title>
  <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f4;
            padding: 20px;
        }
        .container {
            background: white;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            margin-bottom: 20px;
        }
        .hidden {
            display: none;
        }
        h2 {
            color: #333;
        }
        input, select, button {
            padding: 8px;
            margin-top: 5px;
            width: 300px;
        }
        table {
            width: 100%;
            margin-top: 20px;
            border-collapse: collapse;
        }
        th, td {
            text-align: left;
            padding: 8px;
            border-bottom: 1px solid #ddd;
        }
        .pagination {
            display: flex;
            justify-content: center;
            list-style: none;
            padding: 0;
        }
        .pagination li {
            cursor: pointer;
            padding: 5px;
        }
        table {
            margin-top: 20px;
            border-collapse: collapse;
            width: 100%;
        }

        th, td {
            text-align: left;
            padding: 8px;
        }

        th {
            background-color: #4CAF50;
            color: white;
        }

        tr:nth-child(even) {
            background-color: #f2f2f2;
        }

        .form-group {
            margin-top: 20px;
        }

        .btn-primary {
            margin-top: 10px;
        }
    </style>
</head>
<body>
<h1>请款记录管理</h1>

<!-- 新增请款记录表单 -->
<form id="insertForm" action="/oil-manage/insertRequestRecord" method="post">
  <div class="form-group">
    <label for="cardNo">卡号:</label>
    <input type="text" id="cardNo" name="cardNo" required>
  </div>

  <div class="form-group">
    <label for="requestAmount">请款金额:</label>
    <input type="number" id="requestAmount" name="requestAmount" step="0.01" min="0" required>
  </div>

  <button type="submit" class="btn-primary">新增</button>
  <button id="returnHome" onclick="window.location.href='/oil-manage/'">返回首页</button> <!-- 添加返回首页按钮 -->
</form>

<!-- 请款记录列表 -->
<table id="requestRecordTable">
  <thead>
  <tr>
    <th>ID</th>
    <th>卡号</th>
    <th>是否核销</th>
    <th>请款金额</th>
    <th>核销金额</th>
    <th>操作</th>
  </tr>
  </thead>
  <tbody>
  <!-- 数据将在这里动态填充 -->
  </tbody>
</table>

<!-- 分页导航栏 -->
<div id="pagination"></div>

<script>
    const pageSize = 5; // 设置固定的每页显示数量
    const API_URL = '/oil-manage/getRequestRecords';
    let currentPage = 1; // 当前页码

    // 初始化页面数据
    function init() {
        fetchData(currentPage);
    }

    // 获取数据并更新页面
    async function fetchData(pageNum) {
        try {
            const response = await fetch(`${API_URL}?pageNum=${pageNum}&pageSize=${pageSize}`);
            const data = await response.json();
            if (data.success) {
                renderTable(data.data.list);
                renderPagination(data.data.total, pageNum);
            } else {
                alert(data.message);
            }
        } catch (error) {
            console.error('Error:', error);
        }
    }

    // 渲染表格
    function renderTable(records) {
        const tableBody = document.querySelector('#requestRecordTable tbody');
        tableBody.innerHTML = '';
        records.forEach(record => {
            const row = document.createElement('tr');
            row.innerHTML = `
                <td>${record.id}</td>
                <td>${record.cardNo}</td>
                <td>${record.writeOff}</td>
                <td>${record.requestAmount}</td>
                <td>${record.writeOffAmount}</td>
                <td><button onclick="handleWriteOff(${record.id})">核销</button></td>
            `;
            tableBody.appendChild(row);
        });
    }

    // 处理核销操作
    async function handleWriteOff(id) {
        try {
            const response = await fetch(`/oil-manage/updateWriteOffAmount?id=${id}`, { method: 'POST' });
            const data = await response.json();
            if (data.success) {
                alert('核销成功');
                fetchData(currentPage); // 重新加载当前页数据
            } else {
                alert('核销失败: ' + data.message);
            }
        } catch (error) {
            console.error('Error:', error);
        }
    }

    // 渲染分页按钮
    function renderPagination(totalItems, currentPage) {
        const pages = Math.ceil(totalItems / pageSize);
        const paginationUl = document.querySelector('#pagination');
        paginationUl.innerHTML = '';

        for (let i = 1; i <= pages; i++) {
            let button = document.createElement('button');
            button.textContent = i;
            if (i === currentPage) button.style.fontWeight = 'bold';
            button.onclick = () => fetchData(i);
            paginationUl.appendChild(button);
        }
    }

    // 初始化页面
    init();
</script>
</body>
</html>